…s, loading animations, style input sizing

…imation, auto-compression

…eg, proper camera controls

- Fixed FFmpeg: Canvas compression first (Safari), FFmpeg fallback
- MobileHome: Camera-like UI with shutter button + gallery
  - Centered Replay logo (subtle)
  - Big orange shutter button with pulse animation
  - Gallery button for uploads
  - Hint text fades after 3s
- MobileProcessing: Laser scanner effect
  - Frozen first frame as dimmed background
  - Horizontal laser scanning up/down
  - Digital particles and grid overlay
  - Terminal-style status messages
- MobileResult: The Swipe compare slider
  - Fullscreen before/after comparison
  - Drag handle to reveal generated UI
  - Lazy Auth gate (blurred until login)
  - Desktop handoff modal (Phone -> Desktop)
  - Project Synced! message with replay.build link

- Complete mobile rebuild in Lovable/Bolt style
- FloatingIsland: Glassmorphism pill with Configure/Preview tabs
- MobileHeader: Back + Project Name (editable) + Credits/PRO badge
- MobileConfigureView: Video box (Record/Upload split) + Context + Style + Reconstruct button
- MobilePreviewView: Fullscreen iframe + Share button + Desktop handoff modal
- Fixed useIsMobile: Returns null during SSR, shows loading spinner
- Removed old MobileHome, MobileProcessing, MobileResult
- No bottom tab bar - only Floating Island
- Processing animation integrated in Preview tab

- Video preserved in localStorage before login redirect
- FloatingIsland only shows AFTER generation complete
- Credits display shows real credits from context + PRO/Free badge
- Removed all framer-motion animations (no flickering)
- Default project name is 'New Project'
- Simplified style input (text field instead of dropdown)
- Header shows correct plan badge (Pro/Agency/Enterprise/Free)

…dle 401

…h desktop flow

… menu, StyleInjector

…ser can lock screen during generation

…ktop)

…ation

…ation

…more style updates

System Prompt Enhancements:
- PAGE TRANSITION ANIMATIONS: Mandatory Alpine.js x-transition or CSS animations
  - Fade + Slide Up default
  - No instant page switches allowed
- MOBILE-FIRST RESPONSIVENESS:
  - Design order: Mobile → Tablet → Desktop
  - Mandatory responsive patterns for grids, text, padding
  - Critical mobile checks (no horizontal scroll, touch targets 44x44px)
- ZERO HALLUCINATION POLICY:
  - Extract content VERBATIM from video
  - COUNT all elements before generating
  - No inventing features, testimonials, or statistics

Style Updates with Aceternity Components:
- urban-grunge: Background Boxes, Meteors, Wobble Card, Encrypted Text
- dark-cosmos: Glowing Stars, Aurora, 3D Card, Card Spotlight
- neubrutalism: Background Boxes, Wobble Card, hard shadows
- swiss-grid: Background Lines, Grid Pattern, Bento Grid, Tracing Beam

All styles now specify exact components for WOW factor

CHARTS:
- MANDATORY Recharts CDN: cdn.jsdelivr.net/npm/recharts@2.12.7
- Full React.createElement example for charts
- ResponsiveContainer ALWAYS required
- Gradient fills (NOT solid colors)
- Dark/Light theme styling rules
- Animated number counters with Alpine.js
- REJECTION: Custom charts, no animations, overflow

PAGE TRANSITIONS:
- Full Alpine.js page system with x-data currentPage
- Complete x-transition directives for enter/leave
- Navigation active state styling
- 300ms enter, 200ms leave timing
- translateY + opacity for smooth feel
- REJECTION: Instant page switches

The model gpt-5.2 doesn't exist in OpenAI API.
Changed to gpt-4o which is available.
Also changed max_completion_tokens to max_tokens for compatibility.

- Modal now shows two options: Starter Pack () and Pro (/mo)
- Starter Pack: one-time payment for 300 credits
- Uses GPT-5.2 model with max_completion_tokens parameter
- Updated checkout API integration for starter type

- Reduced max video size from 4MB to 3MB (base64 adds ~33% overhead)
- Reduced max width from 1920 to 1280
- Reduced bitrate cap from 1Mbps to 500kbps
- This ensures final payload stays under Vercel's 4.5MB limit

- Disabled global body grain overlay (was too visible)
- Reduced grain-overlay opacity from 0.12 to 0.03
- Reduced grain-overlay-landing opacity from 0.18 to 0.04
- Reduced grain-overlay-card opacity from 0.22 to 0.05
- Increased video compression maxWidth from 1280 to 1920 (1080p)
- Increased video quality from 0.7 to 0.85
- Increased bitrate cap from 500kbps to 1.5Mbps
- Updated system prompt with GSAP animations for all pages

- Page entrance transitions for every tab switch
- Text generate effect for page titles
- Counter animation for all stats
- Card stagger animation with delays
- Table row reveal animation
- initPage() function pattern
- Clear rejection conditions for static pages

Modal shows:
- Publish button to generate link
- Published URL with copy button
- Open link button
- Update button to republish changes

- Dropdown appears below Publish button (like Bolt/Lovable)
- Shows Published URL with copy button
- Live badge when published
- Open and Update buttons
- Closes on outside click

- Enhanced visual design with orange glow border
- Better contrast and larger text (11px)
- Show more lines (20 instead of 15)
- Initialize streaming state when edit starts
- Batch UI updates every 50ms for smooth rendering
- Show 2000 chars instead of 1500
- Better loading animation with 3 dots

- Minimal header with spinner and status
- Code panel only shows when streaming code exists
- Remove 50ms batching - update on every chunk
- Show line count in status

Streaming panel:
- Clean minimal design with spinner
- Batched updates every 100ms (no flickering)
- Subtle code preview appears smoothly
- Shows 'X lines written' status

System prompt animations:
- Text Generate Effect (typing)
- Blur Fade In
- Word Rotate / Flip Words
- Scramble/Decrypt Effect
- Stagger Fade Up for cards
- Blur Scale In for heroes
- Count Up with easing
- Scroll-triggered reveals
- Hover micro-interactions
- Mandatory animation checklist

- Removed hardcoded purple from charts
- AI analyzes style and picks matching colors
- Color mapping: Spotify=green, Orange, Blue, Fintech=cyan
- Better Recharts patterns with gradients
- Multiple chart types (Area, Bar, Line, Pie)
- Animated metric cards with counters
- Clear rejection conditions

Added at TOP of prompt (near image rule):
- Huge warning: AI CANNOT DRAW SVG PATHS
- Explicit forbidden patterns with examples
- Quick Recharts code snippet

Enhanced chart section:
- FORBIDDEN PATTERNS with exact regex-like patterns
- Examples of what NOT to write (path d=, polyline, etc)
- Automatic rejection conditions
- Correct pattern always visible

## Vercel Speed Insights Implementation Report

### Summary
Successfully installed and configured Vercel Speed Insights for the Next.js 14.2.5 project using App Router.

### What Was Implemented

#### 1. Package Installation
- Installed `@vercel/speed-insights` (version ^1.3.1) using npm
- Updated `package.json` and `package-lock.json` with the new dependency
- Installation completed without errors (2 pre-existing vulnerabilities unrelated to our changes)

#### 2. Configuration for App Router
Since the project uses Next.js 14.2.5 with App Router, the following changes were made:
- Added import statement: `import { SpeedInsights } from "@vercel/speed-insights/next";`
- Added the `<SpeedInsights />` component to the root layout (`app/layout.tsx`) inside the `<body>` tag
- Positioned the component after `{children}` but before `<CookieConsent />` for proper initialization

### Files Modified
- **app/layout.tsx**: Added SpeedInsights import and component usage
- **package.json**: Added @vercel/speed-insights dependency
- **package-lock.json**: Updated with new dependency and its transitive dependencies

### Verification Steps Completed
✅ Build completed successfully with `npm run build`
✅ TypeScript type checking passed with `npm run type-check`
✅ No compilation errors or warnings
✅ Project structure preserved - only necessary changes made
✅ All dependencies correctly locked in package-lock.json

### Implementation Details
- **Component Location**: Root layout (app/layout.tsx) - ensures Speed Insights is available across all pages
- **Import Path**: Used `@vercel/speed-insights/next` as recommended for Next.js 13.5+
- **Placement**: Component placed inside the body to monitor all page performance metrics
- **No Configuration Required**: Speed Insights automatically detects environment (development vs. production)

### How Speed Insights Works
Once deployed to Vercel, Speed Insights will:
- Monitor Core Web Vitals (LCP, CLS, FID)
- Collect real user monitoring (RUM) data
- Display performance metrics in the Vercel dashboard
- No code instrumentation needed - works automatically

### Next Steps for User
1. Deploy the changes to Vercel
2. Access the Speed Insights dashboard in the Vercel project settings
3. Monitor performance metrics in real-time as users interact with the application

All changes are production-ready and follow Next.js best practices for performance monitoring.

Co-authored-by: Vercel <vercel[bot]@users.noreply.github.com>